<template>
  <div class="chatdiv">
    <div
      class="maindiv"
      v-for="(item, index) in list"
      :key="index"
      @touchstart="start(item)"
      @touchend="end(item)"
    >
      <div class="friend">
        <div class="friendImg"><img :src="item[4]" /></div>
        <div class="nameAndInfo">
          <p class="friendName">
            <b>{{ item[5] }}</b>
          </p>
          <p class="friendInfo">{{ item[3] }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  props: {
    friendsInfo: {
      type: Array,
    },
  },
  data() {
    return {
      list: [],
      loop: "",
      judge: 0,
      firstPeople: null,
      secendPeople: null,
    };
  },
  watch: {
    friendsInfo() {
      this.list = this.friendsInfo;
    },
  },
  mounted() {
    // console.log("list数据" + this.list);
  },
  methods: {
    start(item) {
      var that = this;

      this.loop = setTimeout(() => {
        console.log("长按了");
        this.$confirm("删除该聊天, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            //调用接口，传过去两个id，发送人和接受人的
            this.axios
              .get("http://120.78.199.38:9000/deleteCharlist", {
                params: {
                  sender: item[1],
                  toUser: item[2],
                },
                // dataType:"json",
              })
              .then((res) => {
                //这边在重新渲染一次聊天列表
                this.axios
                  .get("http://120.78.199.38:9000/findFriendsList", {
                    params: {
                      sender: item[1],
                    },
                  })
                  .then((res) => {
                    this.list = res.data;
                    // console.log(this.friendsInfo);
                  });
                this.$message({
                  type: "succe  ss",
                  message: "删除成功!",
                });
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });

        that.judge = 1;
      }, 1000);
    },

    end(item) {
      console.log(item);
      console.log("取消了");
      //这代表的是长按操作
      if (this.judge == 1) {
        clearTimeout(this.loop); //清空定时器，防止重复注册定时器
        this.judge = 0;
      }
      //进行点击操作
      else {
        clearTimeout(this.loop); //清空定时器，防止重复注册定时器
        if (item[1] != item[2]) {
          if (this.$store.state.yb_userid == item[1]) {
            this.firstPeople = item[1];
            this.secendPeople = item[2];
          } else {
            this.firstPeople = item[2];
            this.secendPeople = item[1];
          }
        } else {
          this.firstPeople = item[1];
          this.secendPeople = item[2];
        }
        this.$router.push({
          path: "/chat",
          query: {
            firstPeople: this.firstPeople,
            secendPeople: this.secendPeople,
            master: item[5],
            headImg: item[4],
          },
        });
      }
    },
    // toChatIndex(item) {
    //   if (item[1] != item[2]) {
    //     if (this.$store.state.yb_userid == item[1]) {
    //       this.firstPeople = item[1];
    //       this.secendPeople = item[2];
    //     } else {
    //       this.firstPeople = item[2];
    //       this.secendPeople = item[1];
    //     }
    //   } else {
    //     this.firstPeople = item[1];
    //     this.secendPeople = item[2];
    //   }
    //   this.$router.push({
    //     path: "/chat",
    //     query: {
    //       firstPeople: this.firstPeople,
    //       secendPeople: this.secendPeople,
    //       master: item[5],
    //       headImg: item[4],
    //     },
    //   });
    // },
  },
};
</script>
<style>
.maindiv {
  padding: 4px;
  margin: 0 5px;
}
.friend {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  /* background-color: rgba(183, 233, 248, 0.527); */
  /*background-color: rgba(155, 201, 238, 0.527);*/
  background-color: white;
  height: 80px;
  border-radius: 10px;
  box-shadow: 2px 2px 5px #bbb;
}
.friendImg {
  flex: 1;
  padding: 8px;
}
.friendImg img {
  height: 8vh;
  width: 8vh;
  border-radius: 50%;
}
.nameAndInfo {
  flex: 4;
  flex-flow: column;
  display: flex;
}
.friendName {
  flex: 1;
  font-size: 18px;
  /* background-color: chartreuse; */
  margin: 0;
  color: black;
}
.friendInfo {
  flex: 1;
  font-size: 14px;
  /* background-color: chartreuse; */
  margin: 0;
  width: 100%;
  margin-top: 5px;
  color: rgb(102, 96, 96);
  height: 30px;
  line-height: 30px;
  overflow: hidden; /* 超出的文本隐藏 */
  text-overflow: ellipsis; /* 溢出用省略号显示 */
  display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
  -webkit-box-orient: vertical; /*  从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） */
  -webkit-line-clamp: 1; /* 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数 */
}
.el-message-box {
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
}
</style>
